<template>
    <view class="shop-container">
        <!-- 搜索栏 -->
        <view class="search-bar">
            <uni-search-bar
                placeholder="搜索"
                radius="100"
                @confirm="handleSearch"
            ></uni-search-bar>
        </view>

        <!-- 分类标签 -->
        <view class="category-tabs">
            <scroll-view class="scroll-view" scroll-x>
                <view
                    v-for="(tab, index) in tabs"
                    :key="index"
                    :class="['tab-item', { active: activeTab === index }]"
                    @click="changeTab(index)"
                >
                    {{ tab }}
                </view>
            </scroll-view>
        </view>
    </view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
// 商品分类标签
const tabs = ref(['推荐', '女装', '男装', '童装', '汉元素']);

// 搜索
const handleSearch = (e) => {
    console.log('搜索内容:', e.value);
    // 加搜索逻辑
};

onLoad(() => {
    // 页面加载时可以添加初始化逻辑
});
</script>

<style lang="scss">
.shop-container {
}

.category-tabs {
    padding: 20rpx 0;
    border-bottom: 1rpx solid #eee;

    .scroll-view {
        white-space: nowrap;
        width: 100%;

        .tab-item {
            display: inline-block;
            padding: 10rpx 30rpx;
            font-size: 28rpx;
            color: #666;

            &.active {
                color: #e74c3c;
                font-weight: bold;
                position: relative;

                &::after {
                    content: '';
                    position: absolute;
                    bottom: 0;
                    left: 50%;
                    transform: translateX(-50%);
                    width: 40rpx;
                    height: 4rpx;
                    background-color: #e74c3c;
                    border-radius: 2rpx;
                }
            }
        }
    }
}

.banner {
    padding: 20rpx 30rpx;

    .banner-img {
        width: 100%;
        border-radius: 16rpx;
    }
}
</style>